<template>
  <div
    class="car-alarm-wrapper d-flex flex-column jc-around ai-start"
    :class="cardData.isSelect ? 'active' : ''"
  >
    <div>{{ cardData.trigger }}</div>
    <div class="img-box d-flex jc-between ai-center">
      <MyImage
        width="120px"
        height="120px"
        :class="{ language, isalive: cardData.alive_type == 1 }"
        :src="cardData.snap_path"
        type="face"
      />
      <MyImage width="120px" height="120px" :src="cardData.img_path" />
      <div class="img-similarity" :class="['lib_type' + cardData.lib_type]">
        {{ cardData.similarity }}%
      </div>
    </div>
    <div>{{ $t('face_nameTag') }}: {{ cardData.person_name }}</div>
    <div>{{ $t('onLibrary') }}: {{ cardData.lib_name }}</div>
    <div class="view-word" @click="jumptoGreyRecord">{{ $t('query_greyList') }}</div>
  </div>
</template>

<script>
import { getStaffDetail } from "@/views/greyRecord/service.js";
export default {
  props: {
    cardData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    language() {
      return this.$store.state.language;
    },
  },
  methods: {
    async jumptoGreyRecord() {
      const params = {
        lib_id: this.cardData.lib_id,
        snap_id: this.cardData.img_id,
      };
      await getStaffDetail(params);
      this.$router.push({
        name: "greyRecord",
        query: {
          id: this.cardData.img_id,
          lib_id: this.cardData.lib_id,
          lib_name: this.cardData.lib_name,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.car-alarm-wrapper {
  box-shadow: 0px 8px 16px 0px rgba(191, 204, 255, 0.2);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(230, 237, 242, 1);
  width: 290px;
  height: 250px;
  position: relative;
  padding: 10px;
  border-radius: 8px;
  overflow: hidden;
  .view-word {
    height: 0;
    transition: all 0.3s;
    position: absolute;
    bottom: 0;
    cursor: pointer;
    width: 100%;
    line-height: 29px;
    text-align: center;
  }
  &:hover {
    .view-word {
      height: 29px;
      background: rgba(30, 136, 229, 0.341176);
    }
  }
  &.active {
    border: 1px solid #09c7aa;
  }
  .img-box {
    position: relative;
    width: 246px;
    .img-similarity {
      background-color: rgba(240, 79, 86, 1);
      border-radius: 13px;
      height: 26px;
      width: 52px;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      text-align: center;
      line-height: 26px;
      color: #fff;
      &.lib_type2 {
        background-color: #78d57d;
      }
      &.lib_type0 {
        background-color: #6d68d3;
      }
    }
  }
  .content {
    height: 100%;
  }
  .alarm-info {
    position: absolute;
    text-align: center;
    line-height: 29px;
    color: #fff;
    right: 10px;
    top: 10px;
    box-shadow: 0px 6px 12px 0px rgba(255, 136, 0, 0.101961);
    background-image: linear-gradient(
      315deg,
      rgba(255, 136, 0, 1) 0,
      rgba(252, 183, 80, 1) 100%
    );
    border-radius: 0px 10px 0px 0px;
    height: 29px;
    width: 114px;
  }
}
</style>
